<html>
    <head>
        <title>transform 转换</title>
    </head>
    <body>
        <script>
             /*
                六、Transform  转换

                            应用于元素的2D 或 3D 转换。  这个属性允许你将元素 旋转、缩放、一定、倾斜等

                                        参数名                                      描述

                                        translateX({<length/percentage>})           X 轴方向平移，支持长度单位或百分比。

                                        translateY({<length/percentage>})           Y 轴方向平移，支持长度单位或百分比。

                                        translate({<length/percentage>} {<length/percentage>})   X 轴和 Y 轴方向同时平移，translateX + translateY 简写。

                                        scaleX(<number>)                             X 轴方向缩放，值为数值，表示缩放比例，不支持百分比。
                                            
                                        scaleY(<number>)                             Y 轴方向缩放，值为数值，表示缩放比例，不支持百分比。

                                        scale(<number>)                              X 轴和 Y 轴方向同时缩放，scaleX + scaleY 简写。

                                        rotate(<angle/degree>)                      将元素围绕一个定点（由 transform-origin 属性指定）旋转而不变形的转换。
                                                                                    指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。

                                        rotateX(<angle/degree>)                     X 轴方向的旋转。

                                        rotateY(<angle/degree>)                     Y 轴方向的旋转。

                                        rotateZ(<angle/degree>)                     Z 轴方向的旋转。

                                        perspective(<length>)                       指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。
                                                                                    z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。Android 4.1及以上版本支持。

                            transform-origin {length/percentage/关键字(top/left/right/bottom)}:      设置一个元素变形的原点，仅支持 2D 坐标。


                              eg: 
                                        <template>
                                            <view class="card">
                                                <view class="box">
                                                    <view class="row-box">
                                                        <view @click="isRotate = !isRotate" class="fill row-rotate " :class="{'rotate':isRotate}"></view>
                                                    </view>
                                                    <text>rotate(45deg) </text>
                                                </view>
                                                <view class="box">
                                                    <view class="row-box">
                                                        <view @click="isScale = !isScale" class="fill row-scale" :class="{'scale':isScale}"></view>
                                                    </view>
                                                    <text>scale(2)</text>
                                                </view>
                                                <view class="box">
                                                    <view class="row-box">
                                                        <view @click="isTranslateX = !isTranslateX" class="fill row-translateX" :class="{'translateX':isTranslateX}"></view>
                                                    </view>
                                                    <text>translateX(45px)</text>
                                                </view>
                                                <view class="box">
                                                    <view class="row-box">
                                                        <view @click="isTranslateY = !isTranslateY" class="fill row-translateY" :class="{'translateY':isTranslateY}"></view>
                                                    </view>
                                                    <text>translateY(45px)</text>
                                                </view>
                                            </view>
                                        </template>
                                        <script>
                                            export default {
                                                data() {
                                                    return {
                                                        "isRotate": false,
                                                        "isScale":false,
                                                        "isTranslateX":false,
                                                        "isTranslateY":false
                                                    }
                                                },
                                            }
                                        <\/script>
                                        <style>
                                            .card {
                                                width:710rpx;
                                                margin:20rpx;
                                                flex-direction:row;
                                                flex-wrap: wrap;
                                            }
                                            .box{
                                                width:355rpx;
                                                height:355rpx;
                                                justify-content: center;
                                                align-items: center;
                                            }
                                            .row-box{
                                                width:200rpx;
                                                height:200rpx;
                                                margin:10rpx;
                                                background-color: #DDDDDD;
                                            }
                                            .fill{
                                                width:200rpx;
                                                height:200rpx;
                                                position: relative;
                                                background-color: #03A9F4;
                                                opacity: 0.5;
                                            }
                                            .row-rotate{
                                                transition-duration:0.3s;
                                                transform:rotate(0deg);
                                            }
                                            .rotate{
                                                transition-duration:0.3s;
                                                transform:rotate(45deg);
                                            }
                                            .row-scale{
                                                transition-duration:0.3s;
                                                transform:scale(1);
                                            }
                                            .scale{
                                                transform:scale(2);
                                            }
                                            .row-translateX{
                                                transition-duration:0.3s;
                                                transform:translateX(0px);
                                            }
                                            .translateX{
                                                transform:translateX(45px);
                                            }
                                            .row-translateY{
                                                transition-duration:0.3s;
                                                transform:translateY(0px);
                                            }
                                            .translateY{
                                                transform:translateY(45px);
                                            }
                                        </style>    
            */

        </script>
    </body>
</html>